<template>
  <div v-if="result" class="start">
    <div class="img" v-if="ress">
      <video
        :src="`${ress.data.url}`"
        controls="controls"
        :poster="`${result.data.cover}`"
      ></video>
    </div>
    <div class="name">
      <h1>《{{ result.data.name }}》</h1>
      <h2>作者：{{ result.data.artistName }}</h2>
      <div class="like" v-if="reg">
        <span
          ><i class="fa fa-heart" aria-hidden="true"></i> {{ reg.likedCount }}
        </span>
        <span
          ><i class="fa fa-share-square-o" aria-hidden="true"></i>
          {{ reg.shareCount }}</span
        >
      </div>
    </div>
    <div class="tag" v-show="result.data.videoGroup.length == 0 ? false : true">
      <h1>标签：</h1>
      <ul>
        <li v-for="index in result.data.videoGroup.length" :key="index">
          {{ result.data.videoGroup[index - 1].name }}
        </li>
      </ul>
    </div>
    <div v-if="comment" v-show="comment.length == 0 ? false : true">
    
      <ul >
        <li
          v-for="index in comment.length"
          :key="index"
          class="list_li"                                                                                                     
        >
          <div class="img">
            <img :src="comment[index-1].user.avatarUrl" />
          </div>
          <div class="center">
            <h2>{{ comment[index-1].user.nickname }}</h2>
            <p>{{ comment[index-1].content }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "MV",
  props: {
    id: [String, Number],
  },
  data() {
    return {
      //   mvid: [],
      result: null,
      ress: null,
      reg: null,
        comment:null
    };
  },
  components: {},
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.axios.get(`/mv/detail?mvid=${vm.id}`).then((result) => {
        vm.result = result;
        // console.log(result);
      });
      next((vm) => {
        vm.axios.get(`/mv/url?id=${vm.id}&r=720`).then((ress) => {
          vm.ress = ress;
          // console.log(ress);
        });
        next((vm) => {
          vm.axios.get(`/mv/detail/info?mvid=${vm.id}`).then((reg) => {
            vm.reg = reg;
            // console.log(reg);
          });
           next((vm)=>{
             vm.axios.get(`/comment/mv?id=${vm.id}`).then((rescomment)=>{
               vm.comment=rescomment.comments
             })
           })
        });
      });
    });
  },
};
</script>
<style scoped lang="less">
.start{
  padding-bottom: 60px;
}
.list_li {
  display: flex;
  position: relative;
  padding: 10px;
  border-bottom: #20d59b3b 1px solid;
  .img {
    width: 18px;
    height: 18px;
    // background-color: cadetblue;
    margin: 5px 6px;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  .center {
    flex: 4;
    h2 {
     
      padding-bottom: 12px;
      padding-top: 5px;
      color:black;
      opacity: .6;
    }
    p {
      line-height: 15px;
      font-size: 12px;
      color: rgb(95, 95, 95);
    }
  }
  .up {
    flex: 1;
    position: absolute;
    top: 4px;
    right: 0;
    font-size: 14px;
    color: #0fb053;
  }
}
.img {
  margin: 0 auto;
  padding-bottom: 10px;
  video {
    width: 100%;
  }
}
.name {
  h1 {
    font-size: 20px;
    padding: 5px 0;
  }
  h2 {
    padding: 5px 0;
  }
}
.like {
  padding: 5px 0;
  color: var(--cy-Color);
  display: flex;
  font-size: 20px;
  justify-content: space-evenly;
  // span{
  // }
}
.tag {
  h1 {
    font-size: 20px;
    padding: 5px 0;
  }
  ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    li {
      color: var(--cy-Color);
      line-height: 25px;
      background-color: #ffffff;
      text-align: center;
      padding: 2px 20px;
      margin: 5px;
      border-radius: 30px;
    }
  }
}
</style>